<template>
	<pager ref="pager" @loadData="loadData" auth>
		<view class="safe-bottom flex flex-col w100" @touchmove.stop.prevent="onBanScroll">
			<view class="btns flex flex-row align-c justify-b">
				<view hover-class="click-view" class="item">
					<image class="ico" mode="widthFix" :src="$assets.img('/static/images/ic004.png')"></image>
				</view>
				<view hover-class="click-view" class="item">
					<image class="ico" mode="widthFix" :src="$assets.img('/static/images/ic005.png')"></image>
				</view>
			</view>
			<view class="flex flex-row align-c justify-c">
				<view class="sbox flex flex-row align-c justify-c">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic006.png')">
					</image>
					<view class="info flex flex-col align-s justify-c">
						<view class="txt1">85%</view>
						<view class="txt2">15KM</view>
					</view>
				</view>
			</view>
			<view class="title">速度档位</view>
			<view class="flex flex-col w100 align-c justify-c">
				<view class="speedbox flex align-c justify-c">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic007.png')">
					</image>
					<view class="w100" style="padding: 30rpx 50rpx;">
						<u-slider v-model="speed" :step="25" :min="0" :max="100" :height="8" inactiveColor="#919bae38"
							:back-style="{background: 'linear-gradient(270deg, #2EABFF 0%, #E3E6EC 100%)'}"
							:use-slot="true">
							<view class="">
								<image class="ico2 flex-shrink" mode="widthFix"
									:src="$assets.img('/static/images/ic008.png')">
								</image>
							</view>
						</u-slider>
					</view>
				</view>
				<view class="levels flex flex-row align-c justify-b">
					<view v-for="(item, index) in 5" :key="index" class="level-item">{{index + 1}}</view>
				</view>
			</view>

			<view class="flex align-c justify-c" style="height: 444rpx;">
				<Joystick :touchRadius="140" :ballMoveRadius="140" :transition="true"
					@onJoyStickUpdate="onJoyStickUpdate" @onJoyStickCancel="onJoyStickCancel">
					<view slot="ball" style="width: 140rpx;height: 140rpx;">
						<image :src="$assets.img('/static/images/joystick-btn.png')"
							style="width: 100%;height: 100%;display: block;"></image>
					</view>
					<view slot="bottom" style="width: 444rpx;height: 444rpx;">
						<image :src="$assets.img('/static/images/joystick-bg.png')"
							style="width: 100%;height: 100%;display: block;"></image>
					</view>
				</Joystick>
			</view>
			<view class="title">方向控制</view>
			<view class="w100" style="height: 60rpx;"></view>
		</view>
	</pager>
</template>
<script>
	import Joystick from './components/joystick/joystick.vue';
	export default {
		components: {
			Joystick
		},
		data() {
			return {
				speed: 0,
			};
		},
		methods: {
			loadData() {
				const vm = this;
				vm.$refs.pager.finish();
			},
			/**
			 * 由于在IOS中页面上下滑具有弹簧回弹效果，会影响摇杆的灵敏性，所以要禁止默认事件
			 */
			onBanScroll() {
				return;
			},
			onJoyStickUpdate(obj) {
				console.log('onJoyStickUpdate', obj)
			},
			onJoyStickCancel() {
				console.log('onJoyStickCancel')
			},
		}
	};
</script>
<style>
	page {
		background-color: #1F1E1E;
	}
</style>
<style lang="scss" scoped>
	.btns {
		padding: 30rpx;

		.item {
			.ico {
				width: 92rpx;
				height: 92rpx;
				display: block;
			}
		}
	}

	.sbox {
		position: relative;
		margin-top: 30rpx;
		width: 400rpx;
		height: 150rpx;
		border: 10rpx solid transparent;
		border-radius: 90rpx;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to bottom, #1F1E1E, #1F1E1E),
			linear-gradient(to bottom, #ABFAEE, #2EABFF);

		.ico1 {
			margin-top: 20rpx;
			width: 150rpx;
			height: 150rpx;
			display: block;
		}

		.info {
			margin-right: 40rpx;

			.txt1 {
				font-size: 48rpx;
				color: #2EABFF;
				font-weight: bold;
			}

			.txt2 {
				font-size: 28rpx;
				color: #2EABFF;
			}
		}
	}

	.title {
		padding: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #959EB0;
		text-align: center;
	}

	.speedbox {
		width: 612rpx;
		height: 84rpx;
		position: relative;

		.ico1 {
			position: absolute;
			width: 100%;
			height: 100%;
			display: block;
		}

		.ico2 {
			width: 56rpx;
			height: 56rpx;
			display: block;
		}
	}

	.levels {
		margin-top: 26rpx;
		margin-bottom: 40rpx;
		padding: 0 120rpx;
		width: 100%;

		.level-item {
			font-size: 24rpx;
			color: #959EB0;
		}
	}
</style>